import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Tabs } from 'antd';
import emitter from '@/Evt.js';

const { TabPane } = Tabs;

class header extends Component {
    state = {
        tabList:[ //头部标签
            {
                value: 'html',
                in: 0
            },
            {
                value: 'css',
                in: 1
            },
            {
                value: 'js',
                in: 2
            },
        ],
    }

    callback = (key) => {
         //emit事件触发方法,过事件名称找对应的事件处理函数getActivedTab，将事件处理函数作为参数传入
        emitter.emit('getActivedTab', this.state.tabList[key]);
    }

    render () {
        return (
          <div className="header-area">
            <Tabs defaultActiveKey="1" onChange={this.callback}>
                {
                    this.state.tabList.map((item, index) => {
                        return (
                            <TabPane tab={item.value} key={index}>
                            </TabPane> 
                        )
                    })
                }
           </Tabs>
          </div>
        )
      }
    }

export default header